<%--
  Created by IntelliJ IDEA.
  User: Pro
  Date: 2018-06-14
  Time: 19:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="UTF-8">
    <title>联系我们</title>
    <link rel="shortcut icon" href="static/assets/css/images/favicon.png">
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>-->
    <style type="text/css">
        #allmap {
            height: 500px;
            width: 100%;
        }

        #r-result, #r-result table {
            width: 100%;
        }
    </style>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/assets/css/main-copy.css">
    <link rel="stylesheet" href="static/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/assets/css/contact.css">


    <!--百度地图ＡＰＩ密钥-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=NOWLIK24cUHQWznNnS2TbgNUi3rt5Oce"></script>

    <script src="static/assets/js/jquery.min.js"></script>

</head>
<body>
<%@include file="../../public/header.jspf" %>



<!--内容-->

<div class="row"style="padding-top: 5%">
    <div class="col-md-10 m-auto">
        <!--地图-->
        <div id="allmap"></div>
        <br>
        <!--地图-->

        <div id="driving_way">
            <select>
                <option value="0">天河客运站到广州商学院（最短时间）</option>
                <option value="1">天河客运站到广州商学院（最短距离）</option>
                <option value="2">天河客运站到广州商学院（避开高速）</option>
            </select>
            <input type="button" id="result" value="查询"/>

        </div>
        <br>
        <div id="r-result"></div>
    </div>

</div>
<!-- CONTACT -->
<div class="col-md-10 m-auto">
    <div class="row box rounded">
        <div class="col-md-12 pt-5 ">
            <div class="section-title">
                <h1>留言联系我们</h1>
            </div>
        </div>
        <div class="col-sm-4 contact-info">
            <p class="contact-content">如果您有广告投放，商务合作的需求，可以通过以下方式联系我们(请简要介绍合作需求):</p>
            <p class="st-phone"><i class="fa fa-mobile"></i> <strong>电话：13888566731</strong></p>
            <p class="st-phone"><i class="fa fa-qq"></i> <strong>qq：77582582</strong></p>
            <p class="st-email"><i class="fa fa-envelope-o"></i> <strong>邮箱：77582582@qq.com</strong></p>
            <!--<p class="st-website"><i class="fa fa-globe"></i> <strong>www.yourdomain.com</strong></p>-->

        </div>
        <div class="col-sm-7 col-sm-offset-1">
            <form action="#" class="contact-form" name="contact-form" method="post">
                <div class="row">

                    <div class="col-sm-8">
                        <input type="tel" id="phone" required placeholder="您的电话">
                    </div>
                    <div class="col-sm-12">
                        <textarea id="content" required cols="30" rows="7" placeholder="您的留言"></textarea>
                    </div>
                    <div class="col-sm-12">
                        <button type="button" id="submit" class="btn btn-send" onclick="submitMessage()">发送留言</button><br><br>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- CONTACT -->



<!--页脚-->
<%@include file="../../public/footter.jspf" %>
<!--模态框-->
<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLiveLabel">信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div id="modalInfo" class="modal-body font-weight-bold">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭窗口</button>
            </div>
        </div>
    </div>
</div>


<!-- Scripts -->
<%--<script src="static/assets/js/jquery.min.js"></script>--%>
<%--<script src="static/assets/js/tether.min.js"></script>--%>
<%--<script src="static/assets/js/index/jquery.scrollex.min.js"></script>--%>
<%--<script src="static/assets/js/index/jquery.scrolly.min.js"></script>--%>
<%--<script src="static/assets/js/skel.min.js"></script>--%>
<%--<script src="static/assets/js/util.js"></script>--%>
<%--<script src="static/assets/js/index/main.js"></script>--%>
<%--<script src="static/assets/js/bootstrap.min.js"></script>--%>
<%--<script src="static/assets/js/index/jssor.slider-21.1.6.min.js" type="text/javascript"></script>--%>
<script>
    function submitMessage() {

        var phone = document.getElementById('phone').value;
        var content = document.getElementById('content').value;
        var modal = $('#exampleModal');
        var info = $('#modalInfo');

        if ( phone === '' || content === ''){
            alert('请填写内容');
            return;
        }
        if (!/\d{11}?/.test(phone)){
            alert("请输入正确的电话号码")
            return;
        }
        $.ajax({
            type:'post',
            url:'api/user/contact',
            data:{ phone:phone, content:content},
            success:function (data) {
                if (data === 1){

                    $('#phone').val('');
                    $('#content').val('');
                    info.text('您的信息已经提交成功！我们将竭尽所能为您服务');
                    modal.modal('show');
                }else {
                    info.text('您的信息已经提交失败了');
                    modal.modal('show');
                }
            },
            error:function (data) {
                console.log(data);
            }
        })
    }

</script>
</body>
</html>

<!--地图主体 -->
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var start = "天河客运站";
    var end = "广州商学院";
    map.centerAndZoom(new BMap.Point(113.574194, 23.308791), 16);//广商门口坐标与地图缩放大小
    //三种驾车策略：最少时间，最短距离，避开高速
    var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
    $("#result").click(function () {
        map.clearOverlays();
        var i = $("#driving_way select").val();
        search(start, end, routePolicy[i]);
        function search(start, end, route) {
            var driving = new BMap.DrivingRoute(map, {
                renderOptions: {map: map, autoViewport: true},
                policy: route
            });
            driving.search(start, end);
        }
    });
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    <!--标签点-->
    var point = new BMap.Point(113.574194, 23.308791);
    map.centerAndZoom(point, 16);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
</script>


